<template>
  <div class="order">
    <div class="order-box">
      <div class="order-title">我为ta选的单</div>
      <div>
        <!-- <div @click="sentAccept ==0" :class="{notAccept:accept==0}">未采纳</div>
        <div @click="sentAccept ==1" :class="{notAccept:accept==1}">已采纳</div> -->
        <ul class="order-tab">
          <li @click="sentAccept =0">
            <div :class="{notAccept:sentAccept==0}">未采纳</div>
          </li>
          <li @click="sentAccept =1">
            <div :class="{notAccept:sentAccept==1}">已采纳</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="order-seek">
      <div class="seek-input">
        <div>
          订单编号：
          <el-input v-model="input" placeholder="请输入内容" />
        </div>
        <div class="seek-num">
          预选单号：
          <el-input v-model="input" placeholder="请输入内容" />
        </div>
        <div>
          订单所属账号：
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="seek-btn">
        <button class="search-btn">搜索</button>
        <button class="reset-btn">重置</button>
        <button class="clear-btn">清除无关系推送</button>
      </div>
    </div>
    <div v-show="sentAccept == 1" class="tab-list">
      <ul>
        <li class="site" @click="cur=0">
          <div :class="{active:cur==0}">全部</div>
        </li>
        <li class="site" @click="cur=1">
          <div :class="{active:cur==1}">待付款</div>
          <div class="site-circle">99</div>
        </li>
        <li class="site" @click="cur=2">
          <div :class="{active:cur==2}">待发货</div>
          <div class="site-circle">99</div>
        </li>
        <li class="site" @click="cur=3">
          <div :class="{active:cur==3}">待收货</div>
          <div class="site-circle">99</div>
        </li>
        <li class="site" @click="cur=4">
          <div :class="{active:cur==4}">待评价</div>
          <div class="site-circle">99</div>
        </li>
      </ul>
    </div>
    <div class="marked">
      <div class="marked-left">
        <span>列表</span>
        <span>商品信息</span>
      </div>
      <div class="marked-right">
        <span>单价（元）</span>
        <span>数量</span>
        <span>状态</span>
        <span>操作</span>
      </div>
    </div>
    <div v-show="sentAccept==0">
    <Collapse :showCount="showCount"/>
    </div>
    <div v-show="sentAccept==1">
      <div v-show="cur==0" class="product-card">
        <div class="back">
          <div class="card-head">
            <div class="card-head-left">
              <div class="icon-box">
                <i class="iconfont icon-shop shop" />
                <div>仪器仪表专卖</div>
              </div>
            </div>
            <div class="card-head-right">订单来源：138001338000（子账号1）</div>
          </div>
          <div class="card-list">
            <div>
              <div class="card-list-left">
                <ul class="bottom">
                  <li class="card-detail">
                    <div class="matter-img" />
                    <div class="matter-detail">
                      <div class="matter-title">钢管</div>
                      <ul>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
                <div class="card-list-mun">
                  <span>58.00</span>
                  <span class="number">2</span>
                  <span class="state">交易进行中</span>
                </div>
              </div>

            </div>
            <div class="card-list-right">
              <span v-if="sentAccept != 1">
                <div class="btn-style">提醒发货</div>
                <div class="btn-style">申请退款</div>
                <div class="btn-style">查看详情</div>
              </span>
              <span v-else>
                <div class="btn-style detail">订单详情</div>
                <div class="btn-style">删除订单</div>
              </span>
            </div>
          </div>
          <div class="card-close">商品总价￥1900.00,运费￥199.00,实付款￥1899.00</div>
        </div>
      </div>
      <div v-show="cur==1" class="product-card">
        <div class="back">
          <div class="card-head">
            <div class="card-head-left">
              <div class="icon-box">
                <i class="iconfont icon-shop shop" />
                <div>仪器仪表专卖</div>
              </div>
            </div>
            <div class="card-head-right">订单来源：138001338000（子账号1）</div>
          </div>
          <div class="card-list">
            <div>
              <div class="card-list-left">
                <ul class="bottom">
                  <li class="card-detail">
                    <div class="matter-img" />
                    <div class="matter-detail">
                      <div class="matter-title">钢管</div>
                      <ul>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
                <div class="card-list-mun">
                  <span>58.00</span>
                  <span class="number">2</span>
                  <span class="state">待买家付款</span>
                </div>
              </div>

            </div>
            <div class="card-list-right">
              <span v-if="sentAccept != 1">
                <div class="btn-style">提醒发货</div>
                <div class="btn-style">申请退款</div>
                <div class="btn-style">查看详情</div>
              </span>
              <span v-else>
                <div class="btn-style detail" @click="GoDetail(1)">订单详情</div>
                <div class="btn-style">删除订单</div>
              </span>
            </div>
          </div>
          <div class="card-close">商品总价￥1900.00,运费￥199.00,实付款￥1899.00</div>
        </div>
      </div>
      <div v-show="cur==2" class="product-card">
        <div class="back">
          <div class="card-head">
            <div class="card-head-left">
              <div class="icon-box">
                <i class="iconfont icon-shop shop" />
                <div>仪器仪表专卖</div>
              </div>
            </div>
            <div class="card-head-right">订单来源：138001338000（子账号1）</div>
          </div>
          <div class="card-list">
            <div>
              <div class="card-list-left">
                <ul class="bottom">
                  <li class="card-detail">
                    <div class="matter-img" />
                    <div class="matter-detail">
                      <div class="matter-title">钢管</div>
                      <ul>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
                <div class="card-list-mun">
                  <span>58.00</span>
                  <span class="number">2</span>
                  <span class="state">待卖家发货</span>
                </div>
              </div>

            </div>
            <div class="card-list-right">
              <span v-if="sentAccept != 1">
                <div class="btn-style">提醒发货</div>
                <div class="btn-style">申请退款</div>
                <div class="btn-style">查看详情</div>
              </span>
              <span v-else>
                <div class="btn-style detail" @click="GoDetail(1)">订单详情</div>
                <div class="btn-style">删除订单</div>
              </span>
            </div>
          </div>
          <div class="card-close">商品总价￥1900.00,运费￥199.00,实付款￥1899.00</div>
        </div>
      </div>
      <div v-show="cur==3" class="product-card">
        <div class="back">
          <div class="card-head">
            <div class="card-head-left">
              <div class="icon-box">
                <i class="iconfont icon-shop shop" />
                <div>仪器仪表专卖</div>
              </div>
            </div>
            <div class="card-head-right">订单来源：138001338000（子账号1）</div>
          </div>
          <div class="card-list">
            <div>
              <div class="card-list-left">
                <ul class="bottom">
                  <li class="card-detail">
                    <div class="matter-img" />
                    <div class="matter-detail">
                      <div class="matter-title">钢管</div>
                      <ul>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
                <div class="card-list-mun">
                  <span>58.00</span>
                  <span class="number">2</span>
                  <span class="state">待收货</span>
                </div>
              </div>

            </div>
            <div class="card-list-right">
              <span v-if="sentAccept != 1">
                <div class="btn-style">提醒发货</div>
                <div class="btn-style">申请退款</div>
                <div class="btn-style">查看详情</div>
              </span>
              <span v-else>
                <div class="btn-style detail" @click="GoDetail(3)">订单详情</div>
                <div class="btn-style">删除订单</div>
              </span>
            </div>
          </div>
          <div class="card-close">商品总价￥1900.00,运费￥199.00,实付款￥1899.00</div>
        </div>
      </div>
      <div v-show="cur==4" class="product-card">
        <div class="back">
          <div class="card-head">
            <div class="card-head-left">
              <div class="icon-box">
                <i class="iconfont icon-shop shop" />
                <div>仪器仪表专卖</div>
              </div>
            </div>
            <div class="card-head-right">订单来源：138001338000（子账号1）</div>
          </div>
          <div class="card-list">
            <div>
              <div class="card-list-left">
                <ul class="bottom">
                  <li class="card-detail">
                    <div class="matter-img" />
                    <div class="matter-detail">
                      <div class="matter-title">钢管</div>
                      <ul>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                        <li>
                          <span>标 号：</span>外16内6.03
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
                <div class="card-list-mun">
                  <span>58.00</span>
                  <span class="number">2</span>
                  <span class="state">交易成功</span>
                </div>
              </div>

            </div>
            <div class="card-list-right">
              <span v-if="sentAccept != 1">
                <div class="btn-style">提醒发货</div>
                <div class="btn-style">申请退款</div>
                <div class="btn-style">查看详情</div>
              </span>
              <span v-else>
                <div class="btn-style detail" @click="GoDetail(4)">订单详情</div>
                <div class="btn-style">删除订单</div>
              </span>
            </div>
          </div>
          <div class="card-close">商品总价￥1900.00,运费￥199.00,实付款￥1899.00</div>
        </div>
      </div>
    </div>

    <el-dialog :title="reminder" :visible.sync="valorisation" width="30%" :before-close="handleClose">
      <span>{{ message }}</span>
      <span slot="footer" class="dialog-footer">
        <span class="cancel"><el-button @click="cancel">取 消</el-button></span>
        <span class="confirm"><el-button v-if="btnState == true" type="primary" @click="confirm">确 定</el-button></span>

      </span>
    </el-dialog>
  </div>
</template>

<script>
import Collapse from './component/Collapse'
export default {
  name:'ChooseForHim',
  components:{
    Collapse
  },
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '',
      input: '',
      cur: 0,
      sentAccept: 0,
      valorisation: false,
      reminder: '',
      message: '',
      btnState: false,
      activeNames: '0',
      showCount:true
    }
  },
  created() {

  },
  methods: {
    dialogVisible() {
      this.valorisation = true
      this.reminder = '提示'
      this.message = '已提醒商家发货'
    },
    cancel() {
      this.valorisation = false
    },
    confirm() {
      this.valorisation = false
    },
    cancellation() {
      this.valorisation = true
      this.reminder = '取消订单'
      this.message = '取消订单后，将无法收到产品，没有支付订单，不会有财产损失，确定取消订单吗？'
      this.btnState = true
    },
    handleClose() {
      this.valorisation = false
    },
    GoDetail(state) {
      console.log(state)
      this.$router.push({
        path: '/menu-detail',
        query: {
          state: state
        }
      })
    },
    // 点击展开
    handleChange(val) {
      if (val) {
        // 发请求
        this.activeNames = val
        console.log(val)
        console.log('sdffds')
      }
    },
    // 删除订单
    delOrder() {
    // this.$refs.delOrder.textContent == '删除'
    },
    toFreight() {
      // console.log('去运费详情页面')
      // this.$router.push('/')
      this.$router.push({
        path: '/prepaid'
      })
    },
    toSearchResult() {
      console.log('去搜索结果页面')
      this.$router.push('/search-result')
    }
  }
}
</script>

<style scoped lang="scss">
.el-icon-plus:before{
font-weight: 700;
    color: #10B2D4FF;
}
.el-icon-minus:before {
 font-weight: 700;
    color: #10B2D4FF;
}
::v-deep .el-collapse {
  margin-top: 10px;
  border: none;

  background-color: #fff;
}
::v-deep .el-collapse-item__arrow {
  display: none;
}
::v-deep .el-collapse-item__header.is-active {
  border-bottom: 1px solid #e5e5e5ff;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 0;
}
::v-deep .el-collapse-item__header {
  height: 52px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
border: none;

  .del-order{
color: #02A9F1FF;
font-size: 12px;
  }
  .del-order:hover{
    cursor: pointer;
  }
}

.order {
  background: #f5f5f5;
  .order-box {
    background: #ffffff;
    height: 56px;
    line-height: 56px;
    padding-left: 20px;
    border-bottom: 3px solid #e5e5e5;
    display: flex;
    .order-title{
      margin-right: 46px;
      color: #3d3d3d;
      font-size: 16px;
      font-weight: bold;
    }
    .order-tab{
      display: flex;
      width: 126px;
      justify-content: space-between;
      cursor: pointer;
    }
    .notAccept{
      border-bottom: 3px solid #ff3b30;
      height: 55px;
      color: #ff3b30;
    }
  }
  .order-seek {
    background: #ffffff;
    padding: 0 20px;
    height: 77px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .seek-input {
      display: flex;
      .seek-num {
        margin: 0 20px;
      }
    }
    .seek-btn {
      .clear-btn{
        width: 140px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        margin-left: 6px;
        background: #f5f5f5;
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        cursor: pointer;
      }
    }
  }
  .tab-list {
    height: 44px;
    background: #ffffff;
    padding-left: 22px;
    line-height: 44px;
    margin-bottom: 10px;
    ul {
      width: 400px;
      display: flex;
      justify-content: space-between;
      .site {
        cursor: pointer;
        position: relative;
        .active {
          border-bottom: 3px solid #ff3b30;
          height: 44px;
          color: #ff3b30;
        }
        .site-circle{
          min-width: 16px;
          height: 16px;
          background: #FF3B30;
          border-radius: 50%;
          text-align: center;
          line-height: 16px;
          position: absolute;
          top: 5px;
          right: -14px;
          color: #ffffff;
          font-size: 6px;
          padding: 0 3px;
        }
      }

    }
  }
  .marked {
    padding-left: 24px;
    display: flex;
    justify-content: space-between;
    line-height: 44px;
    height: 44px;
    background: #ffffff;
    margin-bottom: 10px;
    .marked-left {
      width: 162px;
      display: flex;
      justify-content: space-between;
    }
    .marked-right {
      width: 570px;
      display: flex;
      justify-content: space-between;
      padding-right: 50px;
    }
  }
  .product-card {
    .back {
      margin-bottom: 10px;
      background: #ffffff;
    }
    .back:last-child {
      margin-bottom: 0;
    }
    .card-head {
      display: flex;
      padding: 0 15px;
      height: 55px;
      line-height: 55px;
      border-bottom: 1px solid #e5e5e5;
      font-size: 14px;
      justify-content: space-between;
      .card-head-left {
        display: flex;
        .order-number {
          margin-right: 87px;
        }
        .icon-box{
          display: flex;
          .shop{
            color: #6B6B6B;
            font-size: 15px;
            margin-right: 4px;
          }
        }
      }
    }
    .card-content {
      display: flex;

      .matter {
        display: flex;
        width: 888px;
        justify-content: space-between;
        padding: 20px 0 20px 18px;
        margin-right: 52px;
        .matter-left {
          display: flex;
          .matter-img {
            width: 82px;
            height: 82px;
            background: hotpink;
            margin-right: 30px;
          }
        }
        .matter-right {
          display: flex;
          align-items: center;
          .number {
            margin: 0 116px 0 150px;
          }
          .number-card {
            margin: 0 130px 0 150px;
          }
          .state {
            color: #fc8a41;
            font-size: 14px;
          }
        }
      }
      .operation {
        border-left: 1px solid #e5e5e5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 126px;
        align-items: flex-end;
        color: #8e8e93;
        font-size: 14px;
        padding-right: 24px;
        .btn-style {
          cursor: pointer;
          text-align: left;
          color: #8E8E93;
        }
        .estimate {
          padding-right: 14px;
        }
      }
    }
    .card-list {
      padding-left: 18px;
      padding-right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .card-list-left {
        display: flex;
        padding-right: 54px;
        // border-right: 1px solid #e5e5e5;
        .card-detail {
          display: flex;
          margin-top: 20px;
        }
        .matter-img {
          width: 82px;
          height: 82px;
          background: hotpink;
          margin-right: 30px;
        }
        .matter-detail {
          .matter-title {
          }
        }
      }
      .card-list-left:last-child {
        padding-bottom: 20px;
      }
      .card-list-mun {
        display: flex;
        align-items: center;
        margin-left: 220px;
        .number {
          margin: 0 126px 0 150px;
        }
        .state {
          color: #fc8a41;
          font-size: 14px;
        }
      }
    }
    .card-close {
      padding-right: 20px;
      height: 54px;
      line-height: 54px;
      display: flex;
      justify-content: flex-end;
      border-top: 1px solid #e5e5e5;
    }
    .card-list-right{
      .btn-style{
        color: #8E8E93;
        cursor: pointer;
      }
      .detail{
        color: #02A9F1;
        cursor: pointer;
      }
    }
  }

  /deep/ .seek-input {
    .el-input {
      width: 130px;
      height: 35px;
      .el-input__inner {
        height: 35px;
      }
    }
  }
  /deep/ .seek-input {
    .el-select__caret {
      margin-top: 3px;
    }
  }
  /deep/ .cancel{
    margin-right: 10px;
      .el-button:hover{
        background: #FFDBD8;
        border: 1px solid #FF3B30;
        color: #FF3B30;
      }
  }
  /deep/ .confirm{
    .el-button--primary{
      background: #FF3B30;
      // color: black;
      color: #ffffff;
      border: 1px solid #FF3B30;
    }
  }

}
.el-main {
  overflow: hidden;
}
</style>
